<template>
  <div>
    <!-- 点击跳转 -->
    <div class="main">
      <div id="container" v-for="(travel, index) in travels" :key="index">
        <router-link :to="{path:'/lvxq',query:{id:travel.id}}">
          <span class="tag-l">{{ travel.site }}</span>
          <span class="tag-r">{{ travel.discounts }}</span>
          <img v-lazy="travel.thumbnail" alt="加载图片失败" />
          <p class="wenzi">{{ travel.title }}</p>
          <p class="money">￥{{ travel.price }}起</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Exhibition",
  data() {
    return {
      travels: [],
    };
  },
  mounted() {
    this.$axios.get("/travel").then((res) => {
      this.travels = res.data.result;
    });
  },
};
</script>

<style scoped>
#container {
  float: left;
  width: 45%;
  height: 220px;
  margin: 5px;
  position: relative;
}
img {
  width: 100%;
}
.wenzi {
  font-size: 14px;
  height: 76px;
}
.money {
  color: #ff7400;
  font-size: 18px;
}
.tag-l {
  position: absolute;
  background-color: #ff5c6c;
  border: 1px solid #ff5c6c;
  color: white;
}
.tag-r {
  position: absolute;
  background-color: white;
  border: 1px solid #ff5c6c;
  color: #ff5c6c;
  right: 0;
}
</style>
